<template>
  <div class="reslist">
    <template v-if="searchRes.length">
      <div class="listitem" v-for="item in searchRes" @click="readItem(item.id)" :key="item.id">
        <img class="coverImg" :src="item.cover_img" alt="">
        <p>{{ item.title }}</p>
        <p class="oneRow">{{ item.content | htmlToText }}</p>
        <p class="action"><span class="edit">修改</span><span class="delete">删除</span></p>
      </div>
    </template>
    <div class="noArticle" v-else>
      <el-empty :description="isMyList?'还未发布文章':'用户还未发布文章'">
        <el-button type="text" @click="goPublic()">去发布</el-button>
      </el-empty>
    </div>
  </div>
</template>

<script>
import {searchArticleList} from "@/api/article"
export default {
  data(){
    return{
      uid:-1,
      searchRes:[]
    }
  },
  created(){
    this.uid = this.$route.query["id"]|| localStorage.getItem("uid")
    var obj ={
      uid:this.uid
    }
    searchArticleList(obj).then(res=>{
      if (!res.status) {
        this.searchRes = res.data
      }
    })
  },
  filters:{
    htmlToText(html_str){
      var text = html_str.replace(/<[^<>]+>/g,"");
      return text
    }
  },
  methods:{
    readItem(id){
      this.$router.push(`/readarticle?id=${id}`)
    },
    goPublic(){
      this.$router.push("/addarticle")
    }
  },
  computed:{
    isMyList(){
      return !this.$route.query["id"]||(this.$route.query["id"]==localStorage.getItem("uid"));
      // if(!this.$route.query["id"]||(this.$route.query["id"]==localStorage.getItem("uid"))){
      //   return true
      // }else(){}
      // return id == localStorage.getItem("uid")
    }
  }
}
</script>

<style>
.el-empty__image{
  height: 50vh;
}
.noArticle{
  width: 100%;
}
.reslist{
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  width: 100%;
}
.listitem{
  width: 200px;
  height: 300px;
  margin: 5px;
  border: 1px solid #ccc;
  user-select: none;
}
.coverImg{
  max-height: 200px;
  min-width: 200px;
  pointer-events:none;
}
.oneRow{
  height: 26px;
  line-height: 36px;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.action{
  display: flex;
  justify-content: space-between;
  height: 50px;
  line-height: 50px;
}
.edit{
  cursor: pointer;
}
.delete{
  cursor: pointer;
}
.noArticle{
  display: flex;
  flex-direction: column;
  align-content: center;
}
</style>